<template>
	<div class="refunding-wrapper">
    <!-- TODO 小程序文字滚动 -->
    <text-marquee :marqueeText="refundExplan"></text-marquee>
    <!--修改退换货-->
    <div class="refunding-wrapper-good" v-if="$route.query.modify == 1">
      <div
        class="good-list"
        v-for="item in refundGood"
        v-if="item.complain_num"
        :key="item.item_id">
        <div class="good-list-item mgl0">
          <div class="good-list-item-img"><img :src="item.is_compress == 1 ? item.pic_url + '180x180' : item.pic_url" alt=""></div>
          <div class="good-list-item-cont">
            <div class="title">{{item.title}}</div>
            <div class="center clearfix">
              <div class="sku fl" v-if="item.props">
                <span>{{item.props}}</span>
              </div>
              <div class="txt fr">
                x{{item.complain_num}}
              </div>
            </div>
            <div class="price"><span class="price" v-html="scaleGoodsPriceFn(item.current_price)"></span></div>
          </div>
        </div>
      </div>
    </div>

    <!--正常退换货-->
    <div class="refunding-wrapper-good" v-else>
      <van-checkbox-group
          v-model="result"
          @change="handleChangeEvent"
          ref="checkboxGroup">
          <van-checkbox :name="item.order_item_id"
                        checked-color="#F42B2B"
                        label-disabled
                        icon-size="24px"
                        :disabled="item.is_refundable === 0 ? true:false"
                        class="good-list"
                        v-for="item in refundGood"
                        @click="handleChangeEventChecked"
                        :key="item.item_id">
            <div class="good-list-item">
              <div class="good-list-item-img"><img :src="item.is_compress == 1 ? item.pic_url + '180x180' : item.pic_url" alt=""></div>
              <div class="good-list-item-cont">
                <div class="title">{{item.title}}</div>
                <div class="center clearfix">
                  <div class="sku fl" v-if="item.props">
                    <span>{{item.props}}</span>
                  </div>
                  <div class="txt fr" v-if="$route.query.modify == 1" >
                    x{{item.complain_num}}
                  </div>
                  <div class="txt fr" v-else-if="is_package_item_order && is_hzdx_dhs_dz">
                    x{{item.selectNum}}
                  </div>
                  <div class="fr" v-else>
                    <count-plug v-model="item.selectNum"
                                @input="changeNum"
                                :disabled="disabled"
                                :itemId="item.item_id"
                                :key="item.item_id"
                                :maxLimit="Number(item.num)">
                    </count-plug>
                  </div>
                </div>
                <div class="price"><span class="price" v-html="scaleGoodsPriceFn(item.current_price)"></span></div>
              </div>
            </div>
          </van-checkbox>
        </van-checkbox-group>
    </div>


    <div class="refunding-wrapper-mone mone-flex">
      <div>
        <van-checkbox v-model="isCheckAll" icon-size="24px" checked-color="#F42B2B" @click="checkAllChange"><span class="checkAll">全选</span></van-checkbox>
      </div>
      <div>
        <span>实付金额：</span>
        <span class="price" v-html="scaleGoodsPriceFn(refundOrderInfo.payment)"></span>
      </div>
    </div>

      <div class="refunding-wrapper-type" v-if="refundOrderInfo.status == 2 && refundInfo.type == 2 && refundInfo.is_gys_item != 1 && sid != '4031303'">
        <van-radio-group v-model="refundType">
          <van-radio :name="2" icon-size="24px" label-position="left" checked-color="#F42B2B" class="radio-item">
            <div class="refunding-wrapper-type-item">
              <div class="refunding-wrapper-type-item-img">
                <div class=""><img src="https://img.wifenxiao.com/h5-wfx/images/refund/refund_icon1.png" alt=""></div>
              </div>
              <div class="refunding-wrapper-type-item-cont">
                <p>我要退货</p>
                <p>已收到货，需要退还收到的货物</p>
              </div>
            </div>
          </van-radio>
          <van-radio v-if="$route.query.modify != 1 && is_open_no_return_stock==1" :name="1" icon-size="24px" checked-color="#F42B2B" label-position="left">
            <div class="refunding-wrapper-type-item">
              <div class="refunding-wrapper-type-item-img">
                <div class=""><img src="https://img.wifenxiao.com/h5-wfx/images/refund/refund_icon2.png" alt=""></div>
              </div>
              <div class="refunding-wrapper-type-item-cont">
                <p>我要退款（无需退货）</p>
                <p>没收到货，或与卖家协商同意不用退货只退款</p>
              </div>
            </div>
          </van-radio>
        </van-radio-group>
      </div>

      <!-- 供应商订单开启新版退换货 -->
      <div class="refunding-wrapper-type" v-if="refundOrderInfo.status == 2 && refundInfo.type == 2 && this.refundInfo.is_gys_item == 1 && this.isNewOrderRefund == 1">
        <van-radio-group v-model="refundType">
          <van-radio :name="2" icon-size="24px" label-position="left" checked-color="#F42B2B" class="radio-item">
            <div class="refunding-wrapper-type-item">
              <div class="refunding-wrapper-type-item-img">
                <div class=""><img src="https://img.wifenxiao.com/h5-wfx/images/refund/refund_icon1.png" alt=""></div>
              </div>
              <div class="refunding-wrapper-type-item-cont">
                <p>我要退货</p>
                <p>已收到货，需要退还收到的货物</p>
              </div>
            </div>
          </van-radio>
          <van-radio v-if="$route.query.modify != 1 && is_open_no_return_stock==1" :name="1" icon-size="24px" checked-color="#F42B2B" label-position="left">
            <div class="refunding-wrapper-type-item">
              <div class="refunding-wrapper-type-item-img">
                <div class=""><img src="https://img.wifenxiao.com/h5-wfx/images/refund/refund_icon2.png" alt=""></div>
              </div>
              <div class="refunding-wrapper-type-item-cont">
                <p>我要退款（无需退货）</p>
                <p>没收到货，或与卖家协商同意不用退货只退款</p>
              </div>
            </div>
          </van-radio>
        </van-radio-group>
      </div>

      <div class="refunding-wrapper-check">
        <div class="refunding-wrapper-check-one">
          <div class="r-left"><span>{{type==1?'换货原因':refundType != 2  ? '退款原因':'退货原因'}}</span></div>
          <div class="r-right" :class="showReason ? 'col3':''">
            <wx-picker mode="selector" class="wx-birthday" @change="onConfirmReason" :value="reasonId" :range="reasonColumns">
              <span>{{ showReason || '请选择' }}</span>
              <!-- <img src="https://img.wifenxiao.com/h5-wfx/images/refund/arrow_r.png" alt=""> -->
            </wx-picker>
          </div>
        </div>
        <!-- v-if="refundType == 1" -->
        <div class="refunding-wrapper-check-two" v-if="type==2">
          <div class="r-left"><span>{{refundType != 2  ? '退款金额':'退货金额'}}</span></div>
          <div class="r-right"><span style="color: #333">{{mSymbol.name}}</span><input type="text" v-model="tkMoney" :placeholder="'最多输入'+ refundMoney" style="width: 90%"></div>
        </div>
      </div>
      <!-- refundType单选框显示且选择了退款不退货时不显示 -->
      <div
        class="refunding-wrapper-check"
        v-show="isNewOrderRefund != 1 || type == 1"
        v-if="refundOrderInfo.status != 1 && (!((refundOrderInfo.status == 2 && refundInfo.type == 2 && refundInfo.is_gys_item != 1 && sid != '4031303') && refundType == 1))">
        
        <div class="refunding-wrapper-check-item r-left">
          <van-checkbox v-model="isReceived" label-position="left" checked-color="#ee0a24"  icon-size="24px">
            <div class="">已收到货</div>
          </van-checkbox>
        </div>
        <div v-show="isReceived">
          <div class="refunding-wrapper-check-one">
            <div class="r-left"><span>物流公司</span></div>
            <div class="r-right" :class="showKd ? 'col3':''" @click="showKdPicker=true">
              <wx-picker mode="selector" class="wx-birthday" @change="onConfirmKd" :value="kdId" :range="kdColumns">
                <span>{{ showKd || '请选择' }}</span>
                <!-- <img src="https://img.wifenxiao.com/h5-wfx/images/refund/arrow_r.png" alt=""> -->
              </wx-picker>
            </div>
          </div>
          <div class="refunding-wrapper-check-two" v-if="kdId == 10">
            <div class="r-left"><span>快递公司</span></div>
            <div class="r-right"><input type="text" v-model="kdName" placeholder="请输入快递公司名称"></div>
          </div>
          <div class="refunding-wrapper-check-two">
            <div class="r-left"><span>快递单号</span></div>
            <div class="r-right"><input type="text" v-model="kdNo" placeholder="请输入快递单号"></div>
          </div>
        </div>
      </div>

      <div class="refunding-wrapper-reason">
        <div class="r-left"><span>{{type==1?'换货说明':refundType != 2 ? '退款说明':'退货说明'}}</span></div>
        <div class="r-right"><input type="text" v-model="tkReason"  :placeholder="type==1?'请输入换货说明':refundType != 2 ? '请输入退款说明':'请输入退货说明'"></div>
      </div>

      <div class="refunding-wrapper-img">
        <div class="title">上传凭证</div>
        <div class="box">
          <SmallUploadImg ref="smallUploadImg" :maxLength="maxLength"></SmallUploadImg>
        </div>
      </div>

      <div class="refunding-wrapper-btn" @click="postRefund">
        <div class="btn red-gra-btn"><span>提交申请</span></div>
      </div>
  </div>
</template>

<script>
/*
 * @Author: zhangmeng
 * @Date: 2020-06-29 20:04:56
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-03 14:54:46
 */
import Vue from 'vue'
import { scaleGoodsPrice } from '@/utils/index.js'
import UploadImg from '@/components/UploadImg'
import SmallUploadImg from '@/components/SmallUploadImg'
import CountPlug from '@/components/CountPlug'
import textMarquee from '@/components/textMarquee' // 文字滚动
import Store from '@/utils/store'
import small from '@/smallapp/small'
import { RadioGroup, Radio, NoticeBar, Picker, Popup, Checkbox, CheckboxGroup } from 'vant'

Vue.use(NoticeBar)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Picker)
Vue.use(Popup)
Vue.use(Checkbox).use(CheckboxGroup)
import { getOrderRefunding, postApplicationSubmission } from '@/api/order/order.js'
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'

export default Vue.extend({
  name: 'index',
  components: {
    UploadImg,
    SmallUploadImg,
    CountPlug,
    textMarquee
  },

  data() {
    return {
      maxLength: 3, // 上传凭证最多上传3张
      maxCount: '',
      refundInfo: {},
      refundGood: [],
      refundReason: [],
      refundExplan: '',
      refundExpress: {},
      refundOrderInfo: {},
      refundType: 2,
      refundMoney: '0.00', // 退款金额
      paymentMoney: '0.00', // 退款金额
      delPostMoney: '0,00', // 除去运费的退款金额
      refund_amount_contain_freight: 0, // 是否最后退运费的插件
      allNum: 0, // 初始件数
      type: 0, // 换货1，其他都是2
      radio: 1,
      value: '',
      reasonColumns: [],
      kdColumns: [],
      kdList: [],
      kdId: '',
      showKd: '',
      reasonId: -1,
      showReason: '',
      imglistdata: [],
      disabled: true,
      result: [],
      tkMoney: '',
      tkReason: '',
      isReceived: true, // 默认收到货
      kdNo: '',
      kdName: '',
      is_gys_item: '',
      sid: '',
      refund_explain_address: 0,
      isNewOrderRefund: 0,
      is_open_no_return_stock: 0, // 是否开启退款不退货
      is_hzdx_dhs_dz: 0, // 得炫定制
      is_package_item_order: 0,
      ids_dz: [],
      // 退款全选
      isCheckAll: false,
      checkAllDefault: {
        default_item: [],
        default_num: 0, // 选中的商品总和
        item_num: 0 // 选中的商品件数数量总和
      },
      checkNum: {
        default_num: 0,
        item_num: 0
      }
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    // uploadImg 抛出的图片参数
    uploadImgListIssue(val) {
      // console.log(val)
      const arr = []
      val.forEach((item) => {
        if (item.url) {
          arr.push(item.url)
        } else {
          arr.push(item.content)
        }
      })
      this.imglistdata = arr
    },

    // 复制退货地址
    copyNotice(text, event) {
      // TODO 小程序复制
        wx.setClipboardData({
          data: text,
          success(res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
    },

    // 重新计算退款金额
    recountMoney() {
      let money = 0
      this.refundGood.forEach((element) => {
        // // console.log(element)
        this.result.forEach((item) => {
          if (element.order_item_id == item) {
            money += element.current_price * element.selectNum
          }
        })
      })
      // 避免四舍五入大于实付金额
      this.refundMoney = money.toFixed(2) - this.refundOrderInfo.payment > 0 ? this.refundOrderInfo.payment : money.toFixed(2)
    },

    // 改变选择的商品
    handleChangeEvent(names) {
      // this.recountMoney()
      if (this.refund_amount_contain_freight == 1) {
        if (names.length == this.refundGood.length) {
          let num = 0
          for (const i of this.refundGood) {
            num += Number(i.num)
          }
          if (num < this.allNum) {
            this.refundMoney = this.delPostMoney
          } else {
            this.refundMoney = this.paymentMoney
          }
        } else {
          this.refundMoney = this.delPostMoney
        }
      }
      this.checkNum.default_num = names.length
      this.checkItem()
    },
    // 定制 得炫 点击一个全部选中或者取消选中
    handleChangeEventChecked() {
      if (this.is_package_item_order && this.is_hzdx_dhs_dz) {
        if (!this.ischange) {
          this.result = this.ids_dz
          this.ischange = true
        } else {
          this.result = []
          this.ischange = false
        }
      }
    },
    checkAllChange() {
        if (this.isCheckAll) {
          this.result = this.checkAllDefault.default_item
          const goodList = this.refundGood
          this.refundGood = []
          for (let j = 0; j < goodList.length; j++) {
            if (goodList[j].selectNum != goodList[j].num) {
              goodList[j].selectNum = goodList[j].num
            }
          }
          this.refundGood = goodList
        } else {
          this.result = []
        }
      },
    // 商品数量修改
    changeNum(agr, num) {
      // this.recountMoney()
      if (this.refund_amount_contain_freight == 1) {
        if (agr < num) {
          this.refundMoney = this.delPostMoney
        } else {
          this.refundMoney = this.paymentMoney
        }
      }
      this.checkItem()
    },
    checkItem() {
      this.checkNum.item_num = 0
      for (let j = 0; j < this.refundGood.length; j++) {
        this.checkNum.item_num += Number(this.refundGood[j].selectNum)
      }
      if (this.checkNum.item_num == this.checkAllDefault.item_num && this.checkNum.default_num == this.checkAllDefault.default_num) {
        this.isCheckAll = true
        this.result = this.checkAllDefault.default_item
      } else {
        this.isCheckAll = false
      }
    },

    // 选择原因
    onConfirmReason(e) {
      this.reasonId = this.refundReason[e.detail.value]['id']
      this.showReason = this.refundReason[e.detail.value]['reason']
    },

    // 选择快递
    onConfirmKd(e) {
      this.kdId = this.kdList[e.detail.value]['id']
      this.showKd = this.kdList[e.detail.value]['value']
    },

    // 点击数据提交
    postRefund() {
      const sendData = {}
      sendData.id = this.refundOrderInfo.order_id
      sendData.status = this.refundOrderInfo.status
      sendData.code = this.refundInfo.code
      sendData.checkbox = this.result.join(',')
      sendData.complain_order_id = this.$route.query.complain_order_id
      const nums = []
      for (let i = 0; i < this.result.length; i++) {
        for (let j = 0; j < this.refundGood.length; j++) {
          if (this.result[i] == this.refundGood[j].order_item_id) {
            nums.push(this.refundGood[j].selectNum)
          }
        }
      }
      sendData.num = nums.join(',')
      sendData.return_reason = this.reasonId

      // 如果refundType单选框显示
      if (this.refundOrderInfo.status == 2 && this.refundInfo.type == 2 && this.sid != '4031303') {
        if (this.refundType == 1) {
          sendData.refund_type = 1
        } else {
          sendData.refund_type = 2
        }
      } else {
        sendData.refund_type = 2
      }
      sendData.type = this.type
      sendData.reason = this.tkReason
      sendData.total_fee = this.tkMoney
      sendData.file = this.$refs.smallUploadImg.imgList.join(',')
      sendData.supid = this.refundInfo.supid

      const name = this.type == 1 ? '换货' : this.refundType == 2 ? '退货' : '退款'
      if (this.$route.query.modify != 1) {
        if (this.result.length == 0) {
          this.$Error(`请选择需要${name}的商品`)
          return false
        }
      }
      if (this.reasonId == -1) {
        this.$Error(`请选择${name}原因`)
        return false
      }

      if (this.tkMoney == '' && this.type == 2) {
        this.$Error(`${name}金额不能为空`)
        return false
      }
      // if (this.type == 2 && (this.tkMoney - this.refundOrderInfo.payment > 0)) {
      if (this.type == 2 && (this.tkMoney - this.refundMoney > 0)) {
        this.$Error(`${name}金额不能大于${this.refundMoney}`)
        return false
      }

      // if (this.type == 1 || this.refundType != 1) {
      // isNewOrderRefund为1时开启新版  不验证
      if (this.isNewOrderRefund != 1 && this.refundOrderInfo.status != 1 && (!((this.refundOrderInfo.status == 2 && this.refundInfo.type == 2 && this.refundInfo.is_gys_item != 1 && this.sid != '4031303') && this.refundType == 1))) {
        if (this.refundInfo.is_express_require == 1 && this.refundInfo.is_deliver_goods == 1 && this.isReceived) {
          if (this.kdId == '') {
            this.$Error('请选择快递公司')
            return false
          }
          if (this.kdId == 10 && this.kdName == '') {
            this.$Error('请填写快递公司名称')
            return false
          }
          if (this.kdNo == '') {
            this.$Error('请填写快递单号')
            return false
          }
        }
      }
      sendData.companyName = this.kdName
      // is_receiving  1表示未收到货
      sendData.is_receiving = this.isReceived ? '0' : '1'
      sendData.express = this.kdId
      sendData.return_number = this.kdNo
      if (this.refundInfo.is_return_required) {
        // 是否 原因必填项
        if (this.tkReason == '') {
          this.$Error(`请填写${name}说明`)
          return false
        }
      }
      this.$loadingWrap.show()
      postApplicationSubmission(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.$Error(res.msg)
          if (res.data.redirect_url) {
            setTimeout(() => {
              // window.location.href = res.data.jump_url
              openPage(res.data.redirect_url)
            }, 1000)
          } else{
            setTimeout(() => {
              // TODO 返回订单列表
                wx.navigateBack({
                  delta: 1
                })
                window.$$publish('refreshOrderList', true)
            }, 1000)
          }
          
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 获取基本数据
    getOrderRefundingfFun(sendData) {
      this.$loadingWrap.show()
      getOrderRefunding(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.result = res.data.complain_order_ids || []
          this.refundInfo = res.data
          this.refundGood = res.data.order_info.order
          this.refundGood.map((item) => {
            item.selectNum = item.num
            this.checkAllDefault.item_num += Number(item.num)
          })
          
          this.checkAllDefault.default_num = this.refundGood.length
            // 全选
            for (const i of this.refundGood) {
              this.checkAllDefault.default_item.push(i.order_item_id)
            }
            this.checkNum.default_num = this.checkAllDefault.default_num
            // 定制 杭州得炫 start
            this.is_hzdx_dhs_dz = this.refundInfo.is_hzdx_dhs_dz || 0
            this.is_package_item_order = this.refundInfo.is_package_item_order || 0
            if (this.is_hzdx_dhs_dz && this.is_package_item_order) {
              // for (const i of this.refundGood) {
              //   this.ids_dz.push(i.order_item_id)
              // }
              this.ids_dz = this.checkAllDefault.default_item
              this.result = this.ids_dz
            }
            // 定制 杭州得炫 end
          this.refundReason = res.data.return_reason
          this.refund_explain_address = res.data.refund_explain_address
          this.is_open_no_return_stock = res.data.is_open_no_return_stock
          if (this.refundInfo.supid > 0 && this.refundInfo.supplier_refund_explain[this.refundInfo.supid]) {
            this.refundExplan = this.refundInfo.supplier_refund_explain[this.refundInfo.supid]
          } else {
            this.refundExplan = res.data.refund_explain
          }

          this.refundExpress = res.data.express
          this.refundOrderInfo = res.data.order_info
          this.refundMoney = this.refundOrderInfo.payment || '0.00'
          this.paymentMoney = this.refundOrderInfo.payment || '0.00'
          this.delPostMoney = (Number(this.refundOrderInfo.payment) - Number(this.refundOrderInfo.post_fee)).toFixed(2) > 0 ? (Number(this.refundOrderInfo.payment) - Number(this.refundOrderInfo.post_fee)).toFixed(2): '0.00'
          if (this.refundOrderInfo.status == 1) {
            this.refund_amount_contain_freight = res.data.refund_amount_contain_freight || 0
          } else {
            this.refundMoney = this.delPostMoney
          }
          for (const i of this.refundGood) {
            this.allNum += Number(i.num)
          }
          const result = Object.keys(res.data.express).map(item => ({ id: item, value: res.data.express[item] }))
          const list = []
          result.map((item) => {
            list.push(item.value)
          })
          this.kdColumns = list
          this.kdList = result
          const reasons = []
          this.refundReason.map((item) => {
            reasons.push(item.reason)
          })
          this.reasonColumns = reasons
          this.isNewOrderRefund = res.data.is_new_order_refund
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.sid = this.$store.getters.sid || Store.fetchLocal('sid')
    const $query = this.$route.query
    const sendData = {}
    sendData.id = $query.id
    sendData.type = $query.type
    sendData.supid = $query.supid
    sendData.modify = $query.modify
    sendData.complain_order_id = this.$route.query.complain_order_id
    if (sendData.complain_order_id) this.refundType = 2
    // this.refundType = Number($query.type)
    this.type = $query.type
    let title = '退货/退款申请'
    if (this.type == 1) {
      title = '换货申请'
    }
      wx.setNavigationBarTitle({
        title
      })
    this.getOrderRefundingfFun(sendData)
  },
  mounted() {
    this.maxCount = 3
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>
<style lang="scss">
.miniprogram-root {
  .refunding-wrapper .van-checkbox__icon .van-icon{
    width: 40rpx;
    height: 40rpx;
    font-size: 32rpx;
  }
  .refunding-wrapper .van-checkbox{
    height: auto!important;
  }
  .refunding-wrapper-good  .van-checkbox__icon .van-icon{
    border: 4px solid #c3c1c1
  }
}
.refunding-wrapper{
  .van-radio__label.van-radio__label--left {
    width: calc(100% - 98px);
  }
  .van-checkbox__label{
    margin-left:0;
    flex: 1;
  }
  .price-num{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .van-uploader__upload,.van-uploader__preview-image{
      width:146px;
      height:146px;
      border-radius: 2px;
      border: 2px dotted #b6b6b6;
      background:#fff;
    }
    .van-uploader__upload {
      border: 0 !important;
    }
    .van-uploader__upload{
      background: url("https://img.wifenxiao.com/h5-wfx/images/refund/refund_icon3.png") center no-repeat;
      background-size: 100% 100%;
      .van-uploader__upload-icon{
        margin-top:20px;
        &::before{
          content:"";
        }
      }
    }
    .van-uploader__preview-delete{
      color: #F42B2B;
    }
    .good-list  {
      &:last-child {
        .good-list-item {
          border: none;
        }
      }
    }
}
</style>
<style lang="scss">
@import "src/styles/mixin";
.refunding-wrapper {
  width: 100%;
  box-sizing: border-box;
  &-notice {

  }
  &-good {
    width: 100%;
    margin-bottom: 2px;
    .good-list {
      width: 100%;
      background: #fff;
      padding: 30px 30px 0;
      box-sizing: border-box;
      &-item {
        &.mgl0{
          margin-left: 0;
        }
        width: calc(100% - 30px);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-bottom: 1px solid #ededed;
        margin-left: 30px;
        padding-bottom: 30px;
        &-img {
          width: 180px;
          height: 180px;
          overflow: hidden;
          border-radius: 10px;
          margin-right: 14px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &-cont {
          width: calc(100% - 194px);
          .title {
            // font-size: 28px;
            font-weight: 500;
            min-height: 84px;
            @include lineClamp(28px, 42px, 2);
            margin-bottom: 5px;
          }
          .center {
            width: 100%;
            margin-bottom: 5px;
            .sku {
              color: #999;
              // font-size: 24px;
              font-weight: 500;
              width: 50%;
               @include lineClamp(24px, 1.4, 1);
            }
          }
        }
      }
    }
  }
  &-mone {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    height: 92px;
    line-height: 92px;
    background: #fff;
    text-align: right;
    margin-bottom: 20px;
    font-size: 26px;
    &.mone-flex {
      display: flex;
      align-items: center;
      justify-content:space-between
    }
  }
  &-type {
    width: 100%;
    margin-bottom: 21px;
    background-color: #fff;
    .radio-item {
      border-bottom: 1px solid #ededed;
    }
    &-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 38px 30px;

      box-sizing: border-box;
      align-items: center;
      &-img {
        width: 50px;
        height: 46px;
        margin-right: 31px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-cont {
        p {
          &:first-child {
            font-weight: bold;
            font-size: 32px;
            margin-bottom: 19px;
          }
          &:last-child {
            font-size: 24px;
            color: #999;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &-check {
    margin-bottom: 20px;
    width: 100%;
    background:#fff;
    .refunding-wrapper-check-item{
      padding: 30px 35px;
    }
    &-one {
      width: 100%;
      padding: 30px 35px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      background-color: #fff;
    }
    &-two {
      width: 100%;
      padding: 30px 35px;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      .r-left {
        margin-right: 49px;
      }
      .r-right {
        font-size: 24px;
        color: #999;
        width: 75%;
        input {
          font-size: 26px;
          width: 100%;
        }
      }
    }
    .r-left {
      font-size: 26px;
      font-weight: 500;
    }
    .col3 {
      color: #333;
    }
    .r-right {
      font-size: 28px;
      color: #999;
      display: flex;
      align-items: center;
      input {
        font-size: 28px;
        color: #333;
      }
      img {
        margin-left: 9px;
        width: 9px;
        height: 16px;
      }
    }
  }
  &-reason {
    width: 100%;
    padding: 30px 35px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 20px;
    .r-left {
      margin-right: 49px;
      font-size: 28px;
      font-weight: 500;
    }
    .r-right {
      font-size: 26px;
      width: 75%;
      input {
        width: 100%;
      }
    }
  }
  &-img {
    width: 100%;
    padding: 35px 30px 33px;
    background-color: #fff;
    box-sizing: border-box;
    .title {
      font-size: 28px;
      font-weight: 500;
      padding-bottom: 40px;
    }
    .box {
      &>ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item {
          width: 146px;
          height: 146px;
          margin-right: 20px;
          position: relative;
          .img {
            width: 100%;
            height: 100%;
          }
          .close {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 28px;
            height: 28px;
          }
        }
      }
    }
  }

  &-btn {
    width: 100%;
    padding: 0 50px;
    margin: 50px 0;
    .btn {
      line-height: 92px;
      text-align: center;
      color: #fff;
      font-size: 32px;
      border-radius: 46px;
    }
  }
}
.checkAll {
  margin-left: 20px
}
</style>
